<template>
  <head-top/>
  <div class="item_center">
    <div class="box_size">
      <div class="item_center" style="padding: 10px">
        <div style="width: 400px">
          <el-input>
            <template #suffix>
              <el-icon>
                <Search/>
              </el-icon>
            </template>
          </el-input>
        </div>
      </div>
      <el-row>
        <el-col :class="userPostSearch.orderCondition==='default' ? 'act-color' : '' " :span="2"
                @click="userPostSearch.orderCondition='default'">
          综合
        </el-col>
        <el-col :class="userPostSearch.orderCondition==='love' ? 'act-color' : '' " :span="2"
                @click="userPostSearch.orderCondition='love'">
          最多点赞
        </el-col>
        <el-col :class="userPostSearch.orderCondition==='time' ? 'act-color' : '' " :span="2"
                @click="userPostSearch.orderCondition='time'">
          最新发布
        </el-col>
      </el-row>
      <div>
        <button @click="openCreatePosts">发布动态</button>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in userPostsList" style="margin-top: 10px">
            <user-posts-card :user-posts-item="item" @click="goContent(item.id)"></user-posts-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref, watch} from 'vue'
import {getUserPostList} from "@/api/user";
import {useRouter} from "vue-router";
import UserPostsCard from "@/components/home/UserPostsCard";
import HeadTop from "@/components/home/HeadTop";

const router = useRouter()
let userPostSearch = reactive({
  pageNum: 0,
  pageSize: 20,
  orderCondition: 'default'
})
let userPostsList = ref([])

function openCreatePosts() {
  //前往用户动态内容添加页面
  router.push('/person/square-add')
}

function goContent(postsId) {
  router.push({
    path: "/square-content",
    query: {
      postsId
    }
  })
}

function getUserPosts() {
  getUserPostList(userPostSearch).then(res => {
    userPostsList.value = res.data
  })
}

onMounted(() => {
  getUserPosts()
})

watch(userPostSearch,()=>{
  getUserPosts()
})
</script>

<style scoped>
.item_center_wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap
}

.act-color {
  color: #098CC0;
}

</style>
